BLOG main image
전체 (276)
[Computer] (42)
[Programming] (62)
[DBMS] (26)
[Operating System] (21)
[Study English] (8)
[For money] (28)
[Interest] (89)
«   2009/11   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
77889 Visitors up to today!
Today 81 hit, Yesterday 46 hit
'[Programming]/JavaScript'에 해당되는 글 4건
[폭주기관차, 2008/07/02 14:35, [Programming]/JavaScript]
홈페이지를 보면 두개의 이미지가 부드럽게 바뀌는 것을 자주 볼 게 된다.

엄청 어려운 기술로만 생각을 했는데 자바스크립트에서 단 몇 줄만 넣으면
부드럽게 바뀌는 이미지가 만들어진다는 것에 난 당혹감을 감추지 못하였다.....;; 헐;;

소스코드는 아래와 같다.

<html>
<head>
<script>
function startTrans(){
    faceoff.filters.blendTrans.Apply();
    faceoff.src="face_2.gif"
    faceoff.filters.blendTrans.play();
}
</script>
</head>

<body onLoad=startTrans()>
잠시 기다리시면...<br>
효과를 보실수 있습니다. 잠시만 기다려 주세요.<br>
<img src="face_1.gif" id=faceoff style="filter:blendTrans(duration=10)">
</body>
</html>


첨부된 아래의 예제 파일을 받고 실행 해보라... 놀랍다.

script183.zip

스무스 이미지 변경 예제



간단하게 소수 분석을 하자면 IMG 태그에서 style옵션에 duration=10은 10초동안
두개의 이미지가 변경되는 것을 의미하는 것이다.

    faceoff.filters.blendTrans.Apply();

    
은 현재 faceoff라는 IMG에 있는 이미지를 고정시키고 있다가

    faceoff.src="face_2.gif"

    
이미지를 face_2.gif로 변경하고

    faceoff.filters.blendTrans.play();

    
이제 Apply함수 수행했을때 이미지랑 최근에 바뀐 이미지로 변환하는 것을
시작하라(play)는 명령이다.    

이런 좋은 소스를 무료로 제공해주신 분께 최소한의 예의로 아래에 출처와
소스코드의 변수명을 변경하지 않고 그대로 올렸습니다~

출처 : http://cbkim.wkhc.ac.kr/
        며루치님의 블로그글

Trackback Address :: http://kongmks.cafe24.com/trackback/295
Name
Password
Homepage
Secret
[폭주기관차, 2008/03/18 20:22, [Programming]/JavaScript]
//쿠키 초 단위로 설정하는 함수
function setCookieTime(name, value, mSecond) {
    var today  = new Date();
    var expire = new Date(today.getTime() + mSecond);

    window.document.cookie = name + "=" + escape(value) + ((expire) ? ";path=/; expires=" + expire.toGMTString() : "");
}

// 날짜 단위로 설정하는 함수
function setCookie(name, value, days) {
    setCookieTime(name, value, days * 24 * 60 * 60 * 1000);
}

// 쿠키 읽어오는 함수
function getCookie(uName) {
    var strCookie = " " + window.document.cookie;
    var ptrFr = strCookie.indexOf(" " + uName + '=');

    if (ptrFr != -1) {
        ptrFr = ptrFr + uName.length + 2;
        ptrTo = strCookie.indexOf(';', ptrFr);

        if (ptrTo == -1) {
            ptrTo = strCookie.length;
        }
        return unescape(strCookie.substring(ptrFr, ptrTo));
    } else {
        return "";
    }
}


사용 예제)

setCookie( "Tester", "234", 30 );

var Tester = getCookie( "Tester" );

alert( Tester );


이렇게 사용하면 Tester에 234라는 값이 들어가게 된다.

이 쿠키의 setCookieTime의 window.document.cookie에 들어가는 값을 보면
window.document.cookie = "쿠키이름=쿠키의값;path=/;expires=유효기간;domain=도메인";

이렇게 되어있다.

path는 이 쿠키의 값을 읽어올 수 있는 경로의 범위이다. path값을 안넣어주면
이 쿠키가 설정되는 문서의 위치의 디렉토리와 하위디렉토리까지 문서에서만 사용할수가 있게 된다.
즉, 만약 상위 디렉토리에 있는 문서에서 이 쿠키값을 가져올 수가 없는 것이다.
path로 '/'를 주게 되면 루트 도메인에서부터 하위 디렉토리 전체에서 이 쿠키값을 사용할 수 있게 된다.
이 것을 모르고 2일 간을 고생했다.(괜히 쿠키 버그 탓 하고 있었다..ㅡㅡ;;)

도메인은 위의 경로처럼 한 사이트에서 만든 쿠키가 다른사이트에 영향을 주지 않으므로 적용될 도메인을
기록하면 된다. 생략하면 자동으로 사이트의 기본 도메인으로 설정된다.

유효기간은 설정하지 않으면 익스플로워를 닫을때까지 유효하게 된다.


그리고 생성된 쿠키의 값을 보면

*
Tester
234
www.test.co.kr/
1600
3762760832
29884808
1686902864
29881791
*


이렇게 들어가져있는 것이 보인다.
처음에는 쿠키 이름, 쿠키의 값, 쿠키가 적용될 사이트 이름, 그 밑으로는 아마 유효기간이나 기타 등등
정보가 저장된 듯 하다.

자세한건 책을 좀더 찾아봐야할 것 같고 여기서는 간단하게 쿠키를 자바스크립트로 저장하고 불러오는것만
알아보았다.

참고 : 굄돌님의 블로그 글
       황로거님의 블로그 글
       이명헌 경영스쿨
Trackback Address :: http://kongmks.cafe24.com/trackback/286
Name
Password
Homepage
Secret
[폭주기관차, 2008/03/18 19:56, [Programming]/JavaScript]
자바스크립트로 팝업창을 뛰우는 방법~


var strTitle = "팝업창 제목";
var strBody = "Hello. World!";
var hPop   = window.open( "", "", "top=100, left=80, width=340, height = 500" );

 hPop.document.write("<HTML><HEAD><TITLE>" + strTitle + "</TITLE></HEAD>");
 hPop.document.write("<BODY>" );
 hPop.document.write( strBody    );
 hPop.document.write( "<a href=\"Javascript:self.close();\">닫기</a>" );
 hPop.document.write( "</BODY></HTML>"  );


그외 응용은 여러분들의 몫입니다~ ㅋ

함수로 만들어도 괜찮을 듯 하고 ㅋ


그리고 한가지 추가로 더 응용해서
팝업창 오늘 하루동안 안뜨게 하는 코드도 적어보겠습니다.
웹상에서 적으려니 깔끔하게 적기 힘드네요
그냥 긁으신다음에 복사해서 메모장에서 붙여넣기로 보세요~^^

하루 안뛰우기 옵션 소스 보기..

Trackback Address :: http://kongmks.cafe24.com/trackback/285
Name
Password
Homepage
Secret
[폭주기관차, 2007/01/30 16:40, [Programming]/JavaScript]
Ajax의 특징은 웹에서 불가능이라 여겼던 동적 움직임과 데이터 처리 방식을 Server side가 아닌
Client side로 썼다는 것이다.

- 동적 움직임

  원래 웹이란 건 페이지를 통해 작업이 일어나기 때문에
  다른 작업을 수행을 하려면 페이지 이동을 해야하는데
  Ajax는 페이지 이동없이 작업을 수행하게 만든것이다.


- 데이터 처리 방식

  PHP, ASP등과 같은 언어의 데이터 처리는 Server에서 처리를 한다.
  그리고 그 결과물(HTML)을 우리가 보게 되는 것이다.
  하지만 Ajax는 서버에서 Client측으로 자료 전달을 하면
  Client에서 데이터를 처리하고 실행을 하게 된다.


클라이언트 측 데이터 처리 방식이나 페이지 이동없이 작업을 하는 건
자바스크립트에서도 구현이 가능한 기술이다.

사실 Ajax는 신기술이라기 보다는
JavaScript + CSS + DOM + XMLHttpRequest + XML을 통합해 놓은 것을 말한다.

Ajax기술의 예를 보면 Naver와 같은 검색 창에 몇 글자만 치면 검색어들이 미리
페이지가 바뀌지도 않고 쭈루룩~ 바로 나오는 것을 보았을 것이다.

요즘은 어느 검색 사이트나 기본적으로 다 쓰고 있지만, 처음은 Google에서 시작하였다.
그리고 검색어가 자동으로 완성 되는 이런 것을 Suggest라고 부른다.

참조 : 네이버 지식인 oyj1999karma의 답변 글

Trackback Address :: http://kongmks.cafe24.com/trackback/68
Name
Password
Homepage
Secret
*1